import {
  histories,
  delHistory,
  clearHistory,
  exportHistory,
  sortHistory,
  importHistories,
} from "../histories";
import {
  downText,
  copyText,
  importData,
  checkKey,
  useThrottle,
} from "../utilities";
import { boxFilter } from "../suggest";
import { Trash2 } from "lucide-preact";

const HistoriesPage = () => {
  const [word, setWord] = useThrottle("");

  return (
    <>
      <div class="*:btn-soft *:btn-sm flex w-full justify-between p-1">
        <button
          type="button"
          class="btn btn-secondary"
          onClick={() => {
            importData(
              (data) =>
                !Array.isArray(data) ||
                (data.length > 0 &&
                  !checkKey(data[0], ["content", "time", "count"])),
              importHistories,
            );
          }}
        >
          导入 json
        </button>
        <button
          type="button"
          class="btn btn-error"
          onClick={() => {
            if (confirm("真的清空吗？")) {
              clearHistory();
            }
          }}
        >
          清空历史记录
        </button>
      </div>
      <div class="*:btn-soft *:btn-sm flex w-full justify-between p-1">
        <button
          type="button"
          class="btn btn-info"
          onClick={() => {
            downText(
              JSON.stringify(
                histories.value.toSorted(sortHistory.value),
                void 0,
                2,
              ),
              "搜索历史.json",
            );
          }}
        >
          导出 json (可导入)
        </button>
        <button
          type="button"
          class="btn btn-info"
          onClick={() => {
            downText(exportHistory(), "搜索历史.csv");
          }}
        >
          导出 csv (人读)
        </button>
      </div>
      <label class="input input-sm my-1">
        筛选
        <input
          type="search"
          class="grow"
          onInput={(event) => setWord(event.target.value)}
        />
      </label>
      <ul class="list w-full">
        {histories.value.length > 0 ? (
          boxFilter(histories.value, "content", word, false)
            .toSorted(sortHistory.value)
            .map((item) => (
              <li class="list-row place-items-center p-1" key={item.content}>
                <div class="text-info">{item.count}</div>
                <button
                  class="inline max-w-full appearance-none truncate text-start"
                  onClick={() => copyText(item.content)}
                >
                  {item.content}
                </button>
                <button
                  type="button"
                  class="btn btn-sm btn-soft btn-error"
                  onClick={() => {
                    delHistory(item.content);
                  }}
                >
                  <Trash2 />
                </button>
              </li>
            ))
        ) : (
          <div class="h-32 w-full text-center text-lg/32">什么都没有</div>
        )}
      </ul>
    </>
  );
};

export default HistoriesPage;
